<template>
	<view class="content">
		<view>
			<view class="titleStyle">助理达人招募</view>
			<view>
				<view>
					<image src="../../static/image/a7545c2e935a539853669b483096a92c.jpg" style="width: 100%;height: 400rpx;"></image>
				</view>
				<form>
					<view class="card">
						<view class="items">
							<view>姓名</view>
							<view>
								<input type="" placeholder="请输入姓名" v-model="name" name="name" />
							</view>
						</view>
						<view class="items">
							<view>手机号</view>
							<view>
								<input type="" placeholder="请输入手机号" v-model="phone" name="phone" />
							</view>
						</view>
						<view class="items">
							<view>性别</view>
							<view>
								<radio-group class="uni-flex uni-row radio-group" @change="changeGender">
									<radio value="1" :checked="true" color="#FF2C5C"
										style="transform: scale(0.7); margin-right: 30rpx">男
									</radio>
									<radio value="0" color="#FF2C5C" style="transform: scale(0.7)">女</radio>
								</radio-group>
							</view>
						</view>
						<view style="padding: 20rpx;">
							<view>添加照片</view>
							<!-- 选择图片区域 -->
							<view class="imgBox">
								<view class="addImgWrapper">
									<image mode="widthFix"
										src="https://webrtc.mszn1.com/DemoVideo/indexImg/index/addImg.png"
										@tap="uploadImage()"></image>
								</view>
								<view class="upImgBox" v-for="(item,index) in image_url" :key="index">
									<image class="upImg" :src="item" @tap="previewImg(index)">
										<image class="upImgBoxClose"
											src="https://webrtc.mszn1.com/DemoVideo/indexImg/index/close.svg"
											@tap="removeChooseImage(index)" mode="widthFix"></image>
									</image>
								</view>
							</view>
						</view>
					</view>

					<view>
						<!-- <button class="subBtn" type="">
						
					</button> -->
						<!-- <button form-type="submit" class="subBtn">提交</button> -->
						<button type="button" class="subBtn" @tap="formSubmit">提交</button>
						<!-- <view class="">提交</view> -->
					</view>
				</form>

			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				name: "",
				phone: "",
				sex: '',
				image_url: [],
				reqImgStr: "", //当前图片url
				submitData: {}
			}
		},
		methods: {
			formSubmit() {
				let name = this.name
				let phone = this.phone

				//非空校验
				let err = ""

				if (name == "") {
					err = "姓名不为空"
				}
				if (phone == "") {
					err = "电话号码不为空"
				}
				if (this.image_url.length <= 0) {
					err = "照片不为空"
				}
				if (err) {
					uni.showToast({
						title: err,
						icon: "none",
						duration: 2000
					})
					return
				}

				//发起请求
				console.log("发起请求")
				let data = {
					name: name,
					phone: phone,
					sex: this.sex
				}
				this.submitData = data
				this.submitFeedback(0)
				console.log(data)
			},
			submitFeedback(index) {
				var that = this
				// uni.showLoading({
				// 	title: "提交反馈中"
				// })
				let data = this.submitData
				if (index >= that.image_url.length) {
					uni.hideLoading()
					return
				}
				//console.log(res2.tempFilePath)
				console.log("提交的数据为:", data)
				console.log(that.image_url)
				// uni.request({
				// 	url:"https://qw.lvd8.cn/appapi/Index/intention",
				// 	data: {
				// 		...data
				// 	},
				// 	success: function(res) {
				// 		uni.hideLoading()
				// 		console.log("请求成功")
				// 		console.log(res)
				// 	}
				// })
				
				uni.uploadFile({
					url: 'https://qw.lvd8.cn/appapi/Index/intention',
					filePath: that.image_url[index],
					name: 'img',
					fileType: 'image',
					formData: {
						...data
					},
					success: function(res) {
						console.log(`第${index+1}张上传成功`, res)
						index++
						//新建跳转
						that.submitFeedback(index)
					},
					fail(err) {
						console.log("请求失败",err)
						uni.showToast({
							title: '提交异常',
							icon: 'error',
							duration: 2000,
						});
					}
				})
			},
			// 上传图片
			uploadImage() {
				var that = this
				if (that.image_url.length > 2) {
					uni.showToast({
						title: '超出最大张数限制',
						icon: "error"
					})
					return
				}
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {
						console.log(res.tempFilePaths[0]);
						that.image_url.push(res.tempFilePaths[0])
						that.reqImgStr = res.tempFilePaths[0]
						console.log("当前选择图片为："+that.reqImgStr)
						console.log("总共图片数组为:",that.image_url)
					},
					fail: (err) => {
						// 处理选取图片失败的情况
						console.error('选择图片失败：', err);
					},
				});
			},
			previewImg(index) {
				var that = this
				uni.previewImage({
					current: that.image_url[index],
					//当前显示图片的 http 链接
					urls: that.image_url // 需要预览的图片 http 链接列表

				})
			},
			removeChooseImage(index) {
				console.log("下标" + index)
				console.log("图片组：" + this.image_url)
				this.image_url.splice(index, 1)
			},
			changeGender(e) {
				console.log(e)
				this.sex = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		min-height: 100vh;
		padding: 20rpx 0;
		background-color: #F5F5F5;
	}

	.card {
		box-sizing: border-box;
		border-radius: 20rpx;
		padding: 40rpx;
		background-color: #fff;
		width: 95%;
		margin: 20rpx auto;
	}

	.items {
		border-bottom: 1px solid #EAE8E8;
		padding: 30rpx;
		display: flex;
		justify-content: space-between;

		input {
			text-align: right;
		}
	}


	.subBtn {
		width: 90%;
		background-color: #FF2C5C;
		color: #fff;
		margin: auto;
		border-radius: 20rpx;
		padding: 15rpx;
		text-align: center;
		font-size: 28rpx;
	}

	.titleStyle {
		background-color: #FA97B4;
		font-size: 30rpx;
		text-align: center;
		padding: 10rpx;
		color: #fff;
	}

	/* 图片 */
	.imgBox {
		display: flex;
		flex-wrap: wrap;
		/* 		justify-content: space-around; */
	}

	.addImgWrapper {
		width: 200rpx;
	}

	.imgBox::after {
		content: "";
		flex: auto;
	}

	.addImgWrapper image {
		margin: 5rpx 15rpx;
		width: 150rpx;
		height: 150rpx;
	}

	.imgBox .upImg {
		width: 150rpx;
		height: 150rpx;
		margin: 5rpx 15rpx;
		border-radius: 30rpx;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.upImgBox {
		position: relative;
	}

	.upImgBoxClose {
		position: absolute;
		height: 30px;
		width: 30px;
		top: 0;
		right: 0;
		z-index: 200;
	}

	.text {
		font-size: 12px;
		color: #666;
		margin-top: 5px;
	}
</style>